<!DOCTYPE html>
<%@page language="java" pageEncoding="utf-8" contentType="text/html; charset=UTF-8"%>
<%
	String ctx = request.getContextPath();
%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>客户端监控-历史在线</title>
    <link rel="stylesheet" type="text/css" href="css/basic.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/ui.css">
    <link rel="stylesheet" type="text/css" href="css/g.css">
	<!-- 设置JS全局变量  ctx -->
	<script type="text/javascript">
		var ctx = "<%=request.getContextPath()%>";
	</script>
</head>
<body>
    <jsp:include page="head.jsp"></jsp:include>
    <div class="container">
    	<jsp:include page="monitor_left.jsp"></jsp:include>
        <div class="page-content">
            <div id="content-scroll">
                <div class="cont-area clearfix">
                    <i class="fl"></i><span class="fl">首页&gt;安全审计&gt;客户端监控</span>
                </div>
                <div class="nomal-dom">
                    <table class="g-mt10">
                        <thead>
                            <tr>
                                <th>终端名</th>
                                <th>今日在线（小时）</th>
                                <th>昨日在线（小时）</th>
                                <th>最近7天（小时）</th>
                                <th>最近一个月（小时）</th>
                                <th>总在线时长（小时）</th>
                            </tr>
                        </thead>
                        <tbody id="j-historyList">
                            <script type="text/ysmart" data-name="historyTpl">
                            <@ yepjs.isArray(DATA) && yepjs.forEach(DATA, function(item, index){ @>
                            <tr>
                                <td><@= item.name @></td>
                                <td><@= item.todayOnlineHour @></td>
                                <td><@= item.yesterdayOnlineHour @></td>
                                <td><@= item.weekOnlineHour @></td>
                                <td><@= item.monthOnlineHour @></td>
                                <td><@= item.totalOnlineHour @></td>
                            </tr>
                            <@ }); @>
                            </script>
                        </tbody>
                    </table>
                    <div class="ui-taps g-mt20" id="tapsDom">
                        <div class="ui-taps-card clearfix">
                            <ul>
                                <li class="on">历史在线统计</li>
                                <li>历史在线记录</li>
                            </ul>
                        </div>
                        <div class="ui-taps-body active">
                            <table class="g-mt10">
                                <thead>
                                    <tr>
                                        <th>终端名称</th>
                                        <th>总在线时长（小时）</th>
                                        <th>历史在线情况</th>
                                    </tr>
                                </thead>
                                <tbody id="j-statisticsList">
                                    <script type="text/ysmart" data-name="statisticsTpl">
                                    <@ yepjs.isArray(DATA) && yepjs.forEach(DATA, function(item, index){ @>
                                    <tr data-id="<@= item.id @>">
                                        <td><@= item.name @></td>
                                        <td><@= item.totalOnlineHour @></td>
                                        <td><a href="javascript:;" class="j-onlineHistory">查看历史在线情况</a></td>
                                    </tr>
                                    <@ }); @>
                                    </script>
                                </tbody>
                            </table>
                        </div>
                        <div class="ui-taps-body">
                            <table class="g-mt10">
                                <thead>
                                    <tr>
                                        <th>终端名</th>
                                        <th>当前状态</th>
                                        <th>最后在线时间</th>
                                        <th>离线原因分析</th>
                                        <th>预警处理情况</th>
                                    </tr>
                                </thead>
                                <tbody id="j-recordList">
                                    <script type="text/ysmart" data-name="recordTpl">
                                    <@ yepjs.isArray(DATA) && yepjs.forEach(DATA, function(item, index){ @>
                                    <tr data-id="<@= item.id @>">
                                        <td><@= item.name @></td>
                                        <td><@= item.isOnline @></td>
                                        <td><@= item.lastOnlineTime @></td>
                                        <td><a href="javascript:;" class="j-offline"><@= item.offlineCauseAnalysis @></a></td>
                                        <td><@= item.alertWarningProcessing @></td>
                                    </tr>
                                    <@ }); @>
                                    </script>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/ysmart" data-name="offlineTpl">
        <div class="dialog-table g-mb10">
            <table id="j-list">
                <thead>
                    <tr>
                        <th width="150px">离线原因</th>
                        <th width="150px">次数</th>
                        <th width="150px">占比</th>
                    </tr>
                </thead>
                <tbody>
                    <@ yepjs.isArray(DATA) && yepjs.forEach(DATA, function(item, index){ @>
                    <tr>
                        <td class="tb-name"><@=item.msg @></td>
                        <td class="tb-email"><@=item.offlineCount @></td>
                        <td class="tb-mobile"><@=item.proportion @></td>
                    </tr>
                    <@ }); @>
                </tbody>
            </table>
        </div>
    </script>
    <script type="text/ysmart" data-name="onlineHistoryTpl">
    <div id="j-lineBasic" style="width: 820px; height: 300px; margin: 0 auto"></div>
    </script>
    <script src="js/yep.min.js" type="text/javascript" data-config="YBA.Config.js"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script type="text/javascript">
        yepjs.use({
            name: ["jquery", "YBA.Plugin.slimscroll","YBA.Common"],
            callback: function () {
                $('#side-scroll').slimscroll({
                    height:"100%"
                });
                YBA.Common.sidebar();
                YBA.Common.taps({
                    con:$("#tapsDom")
                });
            }
        });
        yepjs.use({
            name:"YBA.Logic.Statistics.onlineHistory",
            callback:function(){
                YBA.Logic.Statistics.onlineHistory();
            }
        })
    </script>
</body>
</html>
